<script setup>
import { ref, reactive, watch, onMounted, nextTick } from 'vue';
// 接收父组件传入的props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  studentData: {
    type: Object,
    default: () => ({})
  }
});

// 定义要向父组件触发的事件
const emit = defineEmits(['update:visible', 'close']);

// 创建本地对话框可见性变量
const dialogVisible = ref(false);

// 监听props中的visible值变化，同步到本地dialogVisible
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal;
});

// 监听本地dialogVisible变化，通知父组件
watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal);
});

// 选项卡激活状态
const activeTab = ref('基础信息');

// 学生信息数据
const studentInfo = reactive({
  name: '欧阳冉冉',
  gender: '女',
  studentId: '2022100048',
  class: '二年级（2）班',
  idCard: '3301**********2870',
  birthday: '2008.12.20',
  language: '未填写',
  ethnicity: '未填写',
  politicalStatus: '共青团员',
  studentType: '非晚自习通校生',
  enrollmentDate: '2022-09-01',
  studentNumber: '未填写',
  addresses: [
    '浙江省丽水市青田县工业胡同207号',
    '青海省海西蒙古族藏族自治州天峻县偷利略路739号',
    '福建省宁德市屏南县朝阳街704号'
  ]
});

// 内容区域容器引用
const contentContainer = ref(null);
// 定义所有选项卡和对应的内容区域id
const tabs = ['基础信息', '家庭住址', '在校信息', '健康信息', '监护人信息'];

// 切换选项卡 - 改为滚动到对应的内容区域
const changeTab = (tab) => {
  activeTab.value = tab;
  nextTick(() => {
    const targetElement = document.getElementById(tab.replace(/\s+/g, '-'));
    if (targetElement && contentContainer.value) {
      contentContainer.value.scrollTo({
        top: targetElement.offsetTop - 20, // 减去一点偏移量，使滚动更美观
        behavior: 'smooth'
      });
    }
  });
};

// 监听滚动事件，更新当前激活的选项卡
const handleScroll = () => {
  if (!contentContainer.value) return;

  const scrollPosition = contentContainer.value.scrollTop;
  let currentTab = tabs[0];

  // 查找当前滚动位置对应的选项卡
  for (const tab of tabs) {
    const element = document.getElementById(tab.replace(/\s+/g, '-'));
    if (element && element.offsetTop - 40 <= scrollPosition) {
      currentTab = tab;
    }
  }

  activeTab.value = currentTab;
};

// 组件挂载后设置滚动监听
onMounted(() => {
  if (contentContainer.value) {
    contentContainer.value.addEventListener('scroll', handleScroll);
  }
});

// 编辑功能
const handleEdit = () => {
  console.log('编辑学生信息');
  // 此处可实现编辑功能
};

// 更换照片功能
const changePhoto = () => {
  console.log('更换照片');
  // 此处可实现更换照片功能
};

// 关闭页面
const closeForm = () => {
  console.log('关闭页面');
  // 使用本地变量关闭对话框
  dialogVisible.value = false;
  emit('close');
};
</script>

<template>
  <el-dialog top="5vh"
    v-model="dialogVisible"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    width="70%"
    class="student-detail-dialog">
    <div class="student-detail-container">
    <!-- 顶部标题和关闭按钮 -->
    <div class="header">
      <h2>学生详情</h2>
      <button class="close-btn" @click="closeForm">×</button>
    </div>

    <!-- 学生基本信息卡片 -->
    <div class="student-card">
      <div class="student-info">
        <div class="avatar-container">
          <img src="https://api.vvhan.com/api/avatar/dm" alt="学生头像" class="avatar" />
          <button class="change-photo-btn" @click="changePhoto">更换照片</button>
        </div>
        <div class="info-text">
          <div class="name-container">
            <h3>{{ studentInfo.name }}</h3>
            <span class="gender-icon">♀</span>
            <button class="edit-btn" @click="handleEdit">
              <i class="edit-icon"></i>编辑
            </button>
          </div>
          <p class="class-info">{{ studentInfo.class }} · {{ studentInfo.studentType }} | 共青团员</p>
          <p class="student-id">学号：{{ studentInfo.studentId }}</p>
          <div class="tags">
            <span class="tag">班长</span>
            <span class="tag">语文课代表</span>
            <span class="tag">副班长</span>
            <span class="tag">卫生委员</span>
          </div>
        </div>
      </div>

      <!-- 选项卡导航 -->
      <div class="tabs">
        <div
          v-for="tab in tabs"
          :key="tab"
          :class="['tab', { active: activeTab === tab }]"
          @click="changeTab(tab)"
        >
          {{ tab }}
        </div>
      </div>
    </div>

    <!-- 各选项卡内容区域 - 使用ref获取滚动容器 -->
    <div ref="contentContainer" class="tab-content">
      <!-- 基础信息 -->
      <div id="基础信息" class="content-section basic-info">
        <h3>基础信息</h3>

        <div class="info-grid">
          <div class="info-item">
            <div class="label">姓名</div>
            <div class="value">{{ studentInfo.name }}</div>
          </div>
          <div class="info-item">
            <div class="label">性别</div>
            <div class="value">{{ studentInfo.gender }}</div>
          </div>
          <div class="info-item">
            <div class="label">身份证号</div>
            <div class="value">{{ studentInfo.idCard }}</div>
          </div>
          <div class="info-item">
            <div class="label">出生年月日</div>
            <div class="value">{{ studentInfo.birthday }}</div>
          </div>
          <div class="info-item">
            <div class="label">语种</div>
            <div class="value">{{ studentInfo.language }}</div>
          </div>
          <div class="info-item">
            <div class="label">民族</div>
            <div class="value">{{ studentInfo.ethnicity }}</div>
          </div>
          <div class="info-item full-width">
            <div class="label">政治面貌</div>
            <div class="value">{{ studentInfo.politicalStatus }}</div>
          </div>
        </div>
      </div>

      <!-- 家庭住址 -->
      <div id="家庭住址" class="content-section address-info">
        <h3>家庭住址</h3>
        <div class="address-container">
          <div class="info-note">根据监护人地址自动获取</div>
          <div class="address-list">
            <div class="address-item" v-for="(address, index) in studentInfo.addresses" :key="index">
              <div class="label">家庭住址{{ index + 1 }}</div>
              <div class="value">{{ address }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 在校信息 -->
      <div id="在校信息" class="content-section school-info">
        <h3>在校信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <div class="label">班级</div>
            <div class="value">{{ studentInfo.class }}</div>
          </div>
          <div class="info-item">
            <div class="label">入学信息</div>
            <div class="value">{{ studentInfo.enrollmentDate }}</div>
          </div>
          <div class="info-item">
            <div class="label">学号</div>
            <div class="value">{{ studentInfo.studentId }}</div>
          </div>
          <div class="info-item">
            <div class="label">学生类型</div>
            <div class="value">{{ studentInfo.studentType }}</div>
          </div>
          <div class="info-item">
            <div class="label">学籍号</div>
            <div class="value">{{ studentInfo.studentNumber }}</div>
          </div>
        </div>
      </div>

      <!-- 健康信息 -->
      <div id="健康信息" class="content-section health-info">
        <h3>健康信息</h3>
        <div class="empty-state">暂无健康信息数据</div>
      </div>

      <!-- 监护人信息 -->
      <div id="监护人信息" class="content-section guardian-info">
        <h3>监护人信息</h3>
        <div class="empty-state">暂无监护人信息数据</div>
      </div>
    </div>
  </div>
  </el-dialog>
</template>

<style scoped>
.student-detail-container {
  background-color: #f5f7fa;
  max-height: 766px;
  overflow: hidden;
  padding-bottom: 20px;
}

.header {
  background-color: #f5f7fa;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: 1px dashed #ccc;
  color: #999;
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.student-card {
  background-color: #fff;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.student-info {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  object-fit: cover;
  margin-bottom: 10px;
}

.change-photo-btn {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.info-text {
  flex: 1;
}

.name-container {
  display: flex;
  align-items: center;
}

.name-container h3 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.gender-icon {
  color: #ff66a6;
  margin-left: 8px;
  font-size: 18px;
}

.edit-btn {
  margin-left: auto;
  background-color: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 12px;
  color: #1890ff;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.edit-icon {
  margin-right: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231890ff' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.class-info, .student-id {
  font-size: 14px;
  color: #666;
  margin: 8px 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag {
  padding: 4px 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.tab.active {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}

.tab-content {
  background-color: #fff;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  overflow-y: auto;
  max-height: 500px;
  scroll-behavior: smooth;
}

.content-section {
  padding-top: 15px;
  padding-bottom: 25px;
  margin-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px 16px;
}

.full-width {
  grid-column: span 2;
}

.label {
  color: #999;
  font-size: 14px;
  margin-bottom: 8px;
}

.value {
  color: #333;
  font-size: 14px;
}

.address-container {
  position: relative;
}

.info-note {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  color: #999;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.address-item {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px 16px;
}

.empty-state {
  text-align: center;
  color: #999;
  padding: 20px;
  font-size: 14px;
}

/* 添加对话框样式 */
.student-detail-dialog :deep(.el-dialog__body) {
  padding: 0;
}
</style>
